<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 80px;
				background-color: lightblue;
				margin: 10px;
			}
			.c1{
				background-color: red;
			}
			.c2{
				color: blue;
				background-color: greenyellow;
			}
		</style>
		<!-- CDN公共库是指将常用的JS库存放在CDN节点，以方便广大开发者直接调用。
		将JS库存放在服务器单机上相比，CDN公共库更加稳定、高速。 -->
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script>
			$(function(){
				$("#div01").click(function(){
					console.log(this+"被点击了");
				});
				$("#div02").mouseenter(function(){
					console.log(this+"鼠标进入了");
				});
				$("#div02").mouseleave(function(){
					/* console.log(this+"鼠标进入了"); */
					$(this).html("鼠标移出了");
				});
				$("#chk1").focus(function(){
					console.log("获得焦点");
				});
				$("#chk1").blur(function(){
					console.log("失去焦点");
				});
			})
		</script>
	</head>
	<body>
		<div id="div01"></div>
		<div id="div02"></div>
		<div id="div03"></div>
		<div id="div04"></div>
		
		<input type="text" id="chk1">
		<input type="checkbox" id="chk2">
		<input type="checkbox" id="chk3" value="xxxxxxxxxxx">
	</body>
</html>
